<!--
 * @Author: Y先森
 * @Date: 2023-05-06 09:27:51
 * @LastEditors: y && 250048395@qq.com
 * @LastEditTime: 2023-05-06 10:48:57
 * @FilePath: \y-website\src\libs\confirm\index.vue
-->
<template>
  <div>
    <!-- 蒙版 -->
    <transition name="fade">
        <div v-if="isVisible" @click="close" class="w-screen h-screen bg-zinc-900/80 z-40 fixed top-0 left-0"></div>
    </transition>
    <!-- 内容 -->
    <transition name="up">
        <div v-if="isVisible" class="w-[80%] fixed top-1/3 left-1/2 translate-x-[-50%] z-50 px-2 py-1.5 rounded-sm border dark:border-zinc-600 cursor-pointer bg-white dark:bg-zinc-800 xl:w-[35%]">
            <!-- 标题 -->
            <div class="text-lg font-bold text-zinc-900 dark:text-zinc-200 mb-2">{{title}}</div>
            <!-- 内容 -->
            <div class="text-base text-zinc-900 dark:text-zinc-200 mb-2">{{content}}</div>
            <!-- 按钮 -->
            <div class="flex justify-end">
                <m-button type="info" class="mr-2" @click="onCancelClick">{{cancelText}}</m-button>
                <m-button type="main" @click="onConfirmClick">{{confirmText}}</m-button>
            </div>
        </div>
    </transition>
  </div>
</template>

<script setup>
// 在方法调用的组件中，需要主动导入组件
import mButton from '../button/index.vue'
import { ref, onMounted } from 'vue'

const props = defineProps({
    // 标题
    title:{
        type:String
    },
    // 内容
    content:{
        type:String,
        required:true
    },
    // 取消按钮文本
    cancelText:{
        type:String,
        default:'取消'
    },
    confirmText:{
        type:String,
        default:'确定'
    },
    // 取消按钮事件
    cancelHandler:{
        type:Function
    },
    // 确定按钮事件
    confirmHandler:{
        type:Function
    },
    // 关闭confirm的回调
    close:{
        type:Function
    }
})

// 控制显示处理
const isVisible = ref(false)
/**
 * confirm 展示
 */
const show = ()=> {
    isVisible.value = true
}

/**
 * 页面构建完成之后执行，保留动画
 */
 onMounted(()=>{
    show()
 })

 // 关闭动画执行事件
 const duration = '0.5s'

 /**
  * confirm 关闭，保留动画执行时长
  */
 const close = ()=> {
    isVisible.value = false
    setTimeout(()=>{
        if(props.close){
            props.close()
        }
    },parseInt(duration.replace('0.','').replace('s','')) * 100)
 }

 /**
  * 取消按钮点击事件
  */
 const onCancelClick = ()=> {
    if(props.cancelHandler){
        props.cancelHandler()
    }
    close()
 }

 /**
  * 取消按钮点击事件
  */
  const onConfirmClick = ()=> {
    if(props.confirmHandler){
        props.confirmHandler()
    }
    close()
 }
</script>
<style scoped lang='scss'>
.fade-enter-active,
.fade-leave-active {
    transition: all v-bind(duration);
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

.up-enter-active,
.up-leave-active {
    transition: all v-bind(duration);
}
.up-enter-from,
.up-leave-to {
    opacity: 0;
    transform: translate3d(-50%,100px,0);
}
</style>